<template>
    <!-- 质检趋势 -->
    <div class="QualityTestingEchart_wrap">
        <box-group-wrap pageTitle="质检趋势" :isShowData="isShowData">
            <template slot="wrapBody">
                <div class="QualityTestingEchart">
                    <div id="containerecharts" ref="containerecharts" style="height: 100%"></div>
                </div>
            </template>
        </box-group-wrap>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
import moment from "moment";
import echarts from 'echarts'
import { getToken, removeToken, getTokenHsbankNo } from '@/utils/auth';
export default {
    name: 'QualityTestingEchart',
    data() {
        return {
            isShowData: false,
            formData: {
                month: ''
            },
            tableData: '',
            app: {},
            option: '',
            currentMonth: [],
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap },
    computed: {
        ...mapGetters([
            'userInfo',
        ])
    },
    mounted() {
        this.isShowData = true;
        this.formData.month = moment().format('yyyy-MM') + '-01';
        // console.log('this.formData.month', moment().format('YYYY-MM'));
        this.$nextTick(() => {
            const times1 = setInterval(() => {
                this.getEchartData();
                clearInterval(times1);
            }, 1000);
        })
    },
    methods: {
        // 请求初始化页面数据
        getEchartData() {
            // console.log('获取当月月份数据', this.formData.month);
            let params = {
                id: this.userInfo.id,
                month: this.formData.month,
                staffName: getToken() ? JSON.parse(getToken()).userName : '',
            };
            this.$refs.containerecharts;
            this.$post.information.dateForm(params).then((res) => {
                // console.log('质检__echarts数据', res);
                if (res.data.success) {
                    this.isShowData = true;
                    this.tableData = res.data.content || [];
                    const sixMonth = res.data.content[0].sixMonth || [];
                    this.formatDataMonth(sixMonth);
                    // this.total = res.data.content.total;
                    // console.log('this.formData[0].scoreNearBySix', this.tableData[0].scoreNearBySix);
                    // console.log('this.formData[1].scoreNearBySix', this.tableData[1].scoreNearBySix);
                    this.initChart();
                } else {
                    this.isShowData = false;

                }
            });
        },
        //格式化 请求过来的日期
        formatDataMonth(arr) {
            console.log("arr:::", arr);
            if (arr.length > 0) {
                arr.forEach(element => {
                    this.currentMonth.push(moment(element).format('M'));
                });
            }
        },

        // 初始化echarts
        initChart() {
            // console.log('this.tableData_____echarts数据', this.tableData);
            const dom = this.$refs.containerecharts;
            const myChart = echarts.init(dom);
            let app = {};
            this.option = null;
            this.option = {
                color: ['#006dfd', '#ffaf37'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#006dfd'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },

                // 006dfd    ffaf37
                legend: {
                    data: [this.tableData[0].staffName, this.tableData[1].staffName]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [`${this.currentMonth[0]}月`, `${this.currentMonth[1]}月`, `${this.currentMonth[2]}月`, `${this.currentMonth[3]}月`, `${this.currentMonth[4]}月`, `${this.currentMonth[5]}月`],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        min: 50,
                        max: 110,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },

                ],
                series: [
                    {
                        name: this.tableData[0].staffName,
                        type: 'bar',
                        barWidth: 15,
                        data: this.tableData[0].scoreNearBySix,// [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: this.tableData[1].staffName,
                        type: 'bar',
                        barWidth: 15,
                        data: this.tableData[1].scoreNearBySix,//[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            };
            if (this.option && typeof this.option === "object") {
                myChart.setOption(this.option, true);
            }
        }

    },
}
</script>
<style lang="scss">
.QualityTestingEchart_wrap {
    .QualityTestingEchart {
        .box-group-wrap {
            height: 100%;
        }
    }
}
</style>
<style scoped  lang="scss">
.QualityTestingEchart {
    height: 350px;
}
</style>